<template lang="pug">
  .m-statistics
    .title 工单失败原因统计
    .piechat
      .chat(ref="piechat")
      .chat-label(v-if="chatLabel.data")
        div(v-for="(item,index) in chatLabel.data" @click="updateIndex(index)")
          span(:style="{background:chatLabel.color[index]}")
          | {{item.value}}
    .table
      table
        tr
          th(v-for="item in heads") {{item}}
        tr(v-for="(item,index) in data" :class="{active:currentIndex==index,borderno:index===data.length-1}" @click="updateIndex(index)")
          td {{index+1}}
          td {{item.desc}}
          td {{item.value}}
          td {{item.Proportion}}
</template>
<script>
import echarts from 'echarts'
const heads = '序号 失败原因 数量 占比'.split(' ')
let data = [
  {
    desc: '通过接口查询crm用户信息失败',
    value: 144,
    Proportion: '61.82%'
  }
]
let i = 1
while (i < 10) {
  i++
  data.push(data[0])
}
let chatData = [
  { value: 10, name: '1' },
  { value: 10, name: '2' },
  { value: 10, name: '3' },
  { value: 10, name: '4' },
  { value: 10, name: '5' },
  { value: 10, name: '6' },
  { value: 10, name: '7' },
  { value: 10, name: '8' },
  { value: 10, name: '9' },
  { value: 10, name: '10' }
]
export default {
  data () {
    return {
      heads,
      data,
      piechat: '',
      chatData,
      currentIndex: 0
    }
  },
  mounted () {
    setTimeout(this.initPieChat)
  },
  computed: {
    chatLabel () {
      if (this.piechat) {
        let opt = this.piechat.getOption()
        let color = opt.color
        let data = opt.series[0].data
        return { color, data }
      }
      return []
    }
  },
  watch: {
    currentIndex (val, oldval) {
      // console.log(oldval, val)
      // this.currentIndex = val
      this.piechat.dispatchAction({ type: 'downplay', dataIndex: oldval })
      this.piechat.dispatchAction({ type: 'highlight', dataIndex: val })
    }
  },
  methods: {
    initPieChat () {
      this.piechat = echarts.init(this.$refs.piechat)
      let option = {
        title: {
          text: '总数量',
          subtext: this.chatData.map(d => d.value).reduce((a, b) => (a + b)),
          x: '32%',
          y: '40%',
          textAlign: 'center',
          textStyle: {
            fontSize: 15,
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: 15,
            color: '#333'
          }
        },

        color: ['#7cdbde', '#6a7ffb', '#c56297', '#3498f8', '#62a9fa', '#4574ca', '#8ff5e5', '#697efb', '#d9a6e6', '#9277fd'],
        tooltip: {
          formatter: (params) => {
            return `<span style="display:inline-block;background:${params.color};width:6px;height:6px;margin-right:4px;vertical-align:2px;border-radius: 1px;"></span>数量：${params.value}`
          }
        },
        series: [
          {

            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            center: ['33%', '50%'],
            label: {
              normal: {
                position: 'center',
                show: false
              }

            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: chatData
          }
        ]
      }
      this.piechat.setOption(option)
      this.piechat.dispatchAction({ type: 'highlight', dataIndex: this.currentIndex })
      this.piechat.on('click', (params) => {
        let { dataIndex } = params
        this.updateIndex(dataIndex)
      })
      this.piechat.on('mouseout', (params) => {
        let { dataIndex } = params
        if (dataIndex === this.currentIndex) {
          this.piechat.dispatchAction({ type: 'highlight', dataIndex: dataIndex })
        }
      })
    },
    updateIndex (val) {
      this.currentIndex = val
    }
  }
}
</script>
<style lang="stylus" scoped>
.m-statistics
  margin-top 20px
  height 584px
  border-radius 3px
  border solid 1px #dadcdc
  font-size 12px
  .title
    height 33px
    padding 0 16px
    line-height @height
    border-bottom 1px solid #dadcdc
  .piechat
    height 188px
    position relative
    .chat
      height 100%
    .chat-label
      position absolute
      left 70%
      top 40px
      column-count 2
      div
        line-height 20px
        width 2vw
        min-width 30px
        cursor pointer
        span
          display inline-block
          width 6px
          height 6px
          margin-right 4px
          vertical-align 1px
  .table
    padding  0 8px
    table
      width 100%
      vertical-align top
      tr
        cursor pointer
        border-bottom 1px solid #dadcdc
        &.borderno
          border-bottom 0 solid #dadcdc
        th
        td
          color #333333
          height 32px
          line-height @height
          text-align left
          text-indent 5px

        th
          background-color #f2f4f7
        &.active
          background #f5f7fa
        &:hover
          background #f5f7fa
</style>
